import { DropdownMixedOption } from "naive-ui/es/dropdown/src/interface";

const dropDownOptions = ref<DropdownMixedOption[]>([]);
const dropDownShow = ref(false);
const position = ref<Position>({
    x: 0,
    y: 0
})
const PromiseRef = ref()
export const useDropDown = (options?: DropdownMixedOption[]) => {
    if (options) {
        dropDownOptions.value = options
    }
    const showDropDown = <T>(event: MouseEvent) => {
        dropDownShow.value = true
        setDropDownPosition({
            x: event.clientX,
            y: event.clientY
        })
        return new Promise((resolve: (value: T) => void) => {
            PromiseRef.value = { resolve }
        })
    }
    const setDropDownPosition = (pos: Position) => {
        position.value = pos
    }
    const handleSelect = (key: string) => {
        dropDownShow.value = false
        PromiseRef.value?.resolve(key)
    }
    const onClickoutside = () => {
        dropDownShow.value = false
    }
    return { onClickoutside, handleSelect, position, setDropDownPosition, dropDownOptions, dropDownShow, showDropDown };
};
